<template>
	<wd-notice-bar :text=indexMessage prefix="warn-bold" custom-class="space" closable />
	<view style="display: flex;flex-direction: row;align-items: center;">
		<wd-search hide-cancel custom-class="xh-search"/>
		<wd-icon name="add-circle" color="#fcf7f9" />
	</view>
	<view v-for="(item,index) in data" :key="index">
		<wd-card>
			<template #title>
				<view class="title">
					<image :src="item.imgUrl" alt="joy"
						style="border-radius: 4px; margin-right: 12px;width: 40px;height: 40px;" mode="aspectFill" />
					<view>
						<view>{{ item.name }}</view>
						<view class="title-tip">{{item.address}}</view>
					</view>
				</view>
			</template>
			<wd-grid :gutter="10" :column="2">
				<view v-for="(product,index) in productData" :key="index">
					<wd-grid-item use-slot>
						<wd-img :width="150" :height="150" :src="product.imageUrl" enable-preview />
						<view>{{product.name}}</view>
						<view>价格：{{product.price}}</view>
					</wd-grid-item>
				</view>
			</wd-grid>
		</wd-card>
		<wd-divider></wd-divider>
	</view>
	<!-- <wd-loadmore custom-class="loadmore" :state="state" /> -->
</template>

<script lang="ts" setup>
	import axios from 'axios'
	import DemoApi from '@/api/DemoApi'
	import Shop from '@/model/shop/Shop'
	import Product from '@/model/shop/Product'
	import { useToast } from 'wot-design-uni'

	const { show: showToast, loading: showLoading, close: hideLoading } = useToast()

	let indexMessage : string = "南京大牌档于夫子庙平江府店，口誉甚佳。与长安大排档之苏帮菜，实为同门之弟。余曾尝其菜，味道鲜美，食之令人回味。实非一般之佳肴，宜一尝也。"
	// 初始化一个店铺对象实例
	const data = ref<Shop[]>([])
	const productData = ref<Product[]>([])
	// const state = ref<string>('loading')

	onMounted(() => {
		doInit()
	})

	function doInit() {
		showLoading({ loadingType: 'ring', msg: '初始化' })

		DemoApi.shop().then((resp) => {
			hideLoading()
			data.value = resp.data || []
		}).catch((error) => {
			// 判断如果是取消的请求则不提示
			if (axios.isCancel(error)) {
				return
			}
			showToast({
				msg: error.msg,
				iconName: 'error'
			})
		})

		DemoApi.product().then((resp) => {
			hideLoading()
			productData.value = resp.data || []
		}).catch((error) => {
			// 判断如果是取消的请求则不提示
			if (axios.isCancel(error)) {
				return
			}
			showToast({
				msg: error.msg,
				iconName: 'error'
			})
		})
	}
</script>

<style>
	.content,
	.title {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
	}

	.content {
		justify-content: flex-start;
	}

	.title {
		justify-content: flex-start;
	}

	.title-tip {
		color: rgba(0, 0, 0, 0.25);
		font-size: 12px;
	}
	
	:deep(.xh-search){
		width: 83%;
		background-color: #ec1139 !important;
	}
</style>